import React, { Fragment } from 'react';
import { Row, Col, Empty, Tooltip } from 'antd';

import styles from './index.less';

type Item = {
  required: boolean;
  requiredMsg?: string;
  span: number;
  key: string;
  group: string;
  type: string;
  format?: string;
  option: any[];
  position: string;
  value: string;
};

interface IMyTableProps {
  dataList: Item[];
}

class MyTable extends React.Component<IMyTableProps> {
  render() {
    const { dataList = [] } = this.props;

    return (
      <div>
        {dataList.length > 0 ? (
          <Row className={styles.myTable}>
            {dataList.map((item: Item) => {
              const { key, span, value } = item;
              const content = value instanceof Array ? value.join('、') : value;

              return (
                <Col span={span || 8} className={styles.tableCell} key={key}>
                  {item.type === 'TEXTAREA' ? (
                    <Fragment>
                      <div className={styles.cellLabel} style={{ whiteSpace: 'unset' }}>
                        {key}
                      </div>
                      <div className={styles.cellContent} style={{ whiteSpace: 'unset' }}>
                        {content}
                      </div>
                    </Fragment>
                  ) : (
                    <Fragment>
                      <div className={styles.cellLabel}>
                        <Tooltip placement="topLeft" title={key}>
                          {key}
                        </Tooltip>
                      </div>
                      <div className={styles.cellContent}>
                        <Tooltip placement="topLeft" title={content}>
                          {content}
                        </Tooltip>
                      </div>
                    </Fragment>
                  )}
                </Col>
              );
            })}
          </Row>
        ) : (
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
        )}
      </div>
    );
  }
}

export default MyTable;
